<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>兄弟选择器</title>

        <style type="text/css">

            /* class selector */
            .wrapper { border: 1px solid blue ; margin: auto ; }

            .hsqz { background: #ff0 ; }

            /* 一般兄弟组合器（General sibling combinator） */
            .hsqz~li { background: #dedede ; }

            /* 紧邻兄弟组合器（Adjacent sibling combinator）*/
            .hsqz+li { color: red ; font-weight: bold ; }


            .mxw { background: #ff0 ; }
            .mxw~* { font-size: 20px ; color: blue ; }
            .mxw~div { text-align: center ; }
            .mxw~p { border-top: 1px solid green ; }

            .mxw+div { background: #f59f4e ; }
            .mxw+p { background: #769cf6 ; }

        </style>
    </head>
    <body>

        <div class="wrapper first">
            <ul>
                <li>藜蒿炒腊肉</li>
                <li class="hsqz">红烧茄子</li>
                <li>清蒸草鱼</li>
                <li>红烧带鱼</li>
                <li>西红柿炒鸡蛋</li>
                <li>梅菜扣肉</li>
            </ul>
        </div>

        <hr>

        <div class="wrapper">
            <div>麻婆豆腐</div>
            <p class="mxw">毛血旺</p>
            <div>井冈山豆皮</div>
            <p>毛家豆腐</p>
            <div>老碗鱼</div>
            <p>回锅肉</p>
            <div>盐煎肉</div>
        </div>
        
    </body>
</html>